const tokenA = localStorage.getItem("token");
if (!tokenA) {
  location.href = "./login.html";
}
const ml2 = document.querySelector(".ml-2 span");
console.log(ml2);
ml2.innerHTML = localStorage.getItem("username");
const logout = document.querySelector("#logout");
logout.addEventListener("click", function () {
  localStorage.removeItem("username");
  localStorage.removeItem("token");
  location.href = "./login.html";
});
// 调取页面数据接口
// dom元素加载
document.addEventListener("DOMContentLoaded", async () => {
  try {
    const { data: res } = await axios({
      url: "/dashboard",
    });
    console.log(res);
    for (let key in res.overview) {
      document.querySelector(`[name=${key}]`).innerHTML = res.overview[key];
    }
      initSalary(res.year);
      classSalary(res.salaryData)
    classSalary2(res.groupData)
    initBoyGirlEchart(res.salaryData)
    initMapChart(res.provinceData)
  } catch (error) {
    console.log(error);
  }
});
// 折线图
const initSalary = (arr) => {
  // 折线图
  const mychart = echarts.init(document.querySelector("#line"));
  const option = {
    title: {
      text: "2023全学科薪资走势",
    //   left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: arr.map(el=>el.month),
      axisLine: {
        lineStyle: {
          type: "dashed", // 设置为虚线
          // color:'#d8dada'
        },
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "#e5eaf3",
        },
      },
    },
    series: [
      {
        data: arr.map(el => el.salary), 
        type: "line",
        smooth: true,
        symbolSize: 10,
        lineStyle: {
          width: 8,
          color: "#57a0ff",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#61a1f8", // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
    };
    mychart.setOption(option);
}
// 饼状图
const classSalary = function (arr1) {
    // 饼状图
    const mychart = echarts.init(document.querySelector('#salary'))
  const option = {
      color:['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        title:{
          text:'班级薪资分布表'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          top: 'bottom'
        },
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
                data: arr1.map(el => {
                    return {
                        name: el.label,
                        value:el.g_count+el.b_count
                }
            })
             
          }
        ]
    };
    mychart.setOption(option)
}
// 柱状图
const classSalary2 = function (obj) {
    // 柱状图
    const mychart = echarts.init(document.querySelector('#lines'))
    const option = {
      title:{
        text:'班级每组薪资'
      },
      tooltip: {
        show:'true'
          },
      color:[{
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#36d49b' // 0% 处的颜色
      }, {
          offset: 1, color: '#a9f8ee' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#4ba0ef' // 0% 处的颜色
      }, {
          offset: 1, color: '#d7e9fb' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
    ],
      xAxis: {
        type: 'category',
        axisLine:{
          lineStyle:{
            type:'dashed',
            color:'#d4d4d4'
          }
        },
        // tooltip: {show:true},
        axisLabel:{
          color:'#999'
        },
        data: obj[1].map(el => el.name)
      },
      yAxis: {
        type: 'value',
        splitLine:{
          lineStyle:{
            type:'dashed'
          }
        },
      },
      series: [
        {
          data: obj[1].map(el => el.hope_salary),
          type: 'bar',
          name:'期望薪资'
        },
        {
          data: obj[1].map(el => el.salary),
          type: 'bar',
          name:'实际薪资'
        }
      ]
    };
  mychart.setOption(option)
  // 点击事件
const btns = document.querySelector('#btns')
btns.addEventListener('click', function (e) {
    if (e.target.tagName==='BUTTON') {
        console.log(e.target);
        document.querySelector('.btn-blue').classList.remove('btn-blue')
        e.target.classList.add('btn-blue')
      const group = e.target.innerHTML
      i=group-1
      option.xAxis.data = obj[group].map(el => el.name)
      option.series[0].data=obj[group].map(el => el.hope_salary)
      option.series[1].data = obj[group].map(el => el.salary)
      mychart.setOption(option)
    }
})
  // 定时器
  const btnall=document.querySelectorAll('#btns button')
  let i = 0
  setInterval(() => {
    i++
    if (i > 7) i = 0
    btnall[i].click()
  },2000)
}
// 饼图
// ---------- 男女薪资分布 ----------
const initBoyGirlEchart  = (data) => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector('#gender'))

  // 指定图表的配置项和数据
  const option = {
    // title可以设置一个数组 给多个标题
    title: [
      {
        text: '男女薪资分布',
        top: '3%',
        left: '4%'
      },
      {
        text: '男生',
        left: 'center',
        top: '45%'
      },
      {
        text: '女生',
        left: 'center',
        top: '85%'
      }
    ],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      show: false
    },
    color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['25%', '35%'],
        // 圆心的位置
        center: ['50%', '30%'],
        data: data.map(v => {
          return {
            value: v.b_count,
            name: v.label
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['25%', '35%'],
        center: ['50%', '70%'],
        data: data.map(v => {
          return {
            value: v.g_count,
            name: v.label
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
// 地图
const initMapChart = (provinceData) => {
  const myEchart = echarts.init(document.querySelector('#map'))
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]
    // 数据处理
    provinceData.forEach(el => {
      console.log(el)
      // arr.find ==> 
      dataList.find(v => {
        if (el.name.indexOf(v.name) === 0){
          v.value = el.value
        }
      })
    })
  let option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}
